<template>
  <div class="margin-Margin">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <UploadExcel :on-success="handleSuccess" :before-upload="beforeUpload" />
      </div>
      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
